<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
    <link href="plugins/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page" id="app">
    <div class="nav-left" v-show="navLeftFlag" ref="navLeft">
        <div class="LogoName">
            苏州大气环境监测平台
        </div>
        <div class="navDiv">
            <div class="navName">导航</div>
            <div class="nav-list">
                <ul>
                    <li class="nav-tab a_active waves-effect">
                        <a href="/index" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 主页
                        </a>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-map'></i>监测点列表
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/ob1" class="li-a-a" target="iframe">彩香幼儿园</a>
                        </div>
                        <div class="nav-box">
                            <a href="/ob2" class="li-a-a" target="iframe">上方山</a>
                        </div>
                        <div class="nav-box">
                            <a href="/ob3" class="li-a-a" target="iframe">北库轧钢厂</a>
                        </div>
                        <div class="nav-box">
                            <a href="/ob4" class="li-a-a" target="iframe">采莲商业广场</a>
                        </div>
                        <div class="nav-box">
                            <a href="/ob5" class="li-a-a" target="iframe">红庄</a>
                        </div>
                        <div class="nav-box">
                            <a href="/ob6" class="li-a-a" target="iframe">木渎中学</a>
                        </div>
                    </li>
                    <!-- <li class="nav-tab">
                        <a href="#" class="li-a"><i class='bx bx-home-smile'></i> 设备管理</a>
                    </li> -->
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a" target="iframe"><i class='bx bx-layer'></i>单项数据
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/data_CO" class="li-a-a" target="iframe">CO数据</a>
                        </div>
                        <div class="nav-box">
                            <a href="/data_O3" class="li-a-a" target="iframe">O3数据</a>
                        </div>
                        <div class="nav-box">
                            <a href="/data_SO2" class="li-a-a" target="iframe">SO2数据</a>
                        </div>
                        <div class="nav-box">
                            <a href="/data_PM10" class="li-a-a" target="iframe">PM10数据</a>
                        </div>
                        <div class="nav-box">
                            <a href="/data_PM25" class="li-a-a" target="iframe">PM2.5数据</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-data'></i>历史数据
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/history" class="li-a-a" target="iframe">历史数据</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i>国家标准
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/standard" class="li-a-a" target="iframe">国家标准</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i>数据接口
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/api" class="li-a-a" target="iframe">接口文档</a>
                        </div>
                        <div class="nav-box">
                            <a href="/test" class="li-a-a" target="iframe">接口测试</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-info-circle'></i>帮助简介
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="/list" class="li-a-a" target="iframe">监测点简介</a>
                        </div>
                        <div class="nav-box">
                            <a href="/help" class="li-a-a" target="iframe">平台帮助</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="/" class="li-a"><i class='bx bx-user'></i>退出登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav-right" ref="navRight">
        <div class="nav-top">
            <button type="button" class="btn btn-primary btn-sm hiddenBtn" style="line-height: 10px;" @click="isShowLeft">
                <i class="bx bx-grid-alt" style="font-size: 16px;"></i>
            </button>
            <!-- <button type="button" class="btn btn-primary btn-sm showBtn" style="line-height: 10px; display: none;" onclick="showNavRight">
                <i class="bx bx-expand" style="font-size: 16px;"></i>
            </button> -->
        </div>
        <div class="content-page" ref="cPage">
            <iframe name="iframe" width="100%" height="100%" frameborder="0" src="/index"></iframe>
        </div>
    </div>
</div>
<script src="/javascripts/vue.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
			$(function() {
				let navflag = false;
				$('.nav-tab').click(function() {
					$(this).siblings().each(function() {
						$(this).removeClass('a_active');
						// $(this).removeClass('a_active');
						$(this).find('.nav-box').css('height', '0')
						//关闭右侧箭头
						if ($(this).attr('class').indexOf('nav-ul') != -1) {
							$(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
							$(this).find('.bx-chevron-right').css('transition', 'all .5s')
							$(this).removeClass('nav-show')
							// $(this).find('div').removeClass('nav-box')
						}
					})
					//当前选中
					$(this).addClass('a_active')
					$(this).find('.li-a').addClass('active')
					// 打开右侧箭头
					$(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
					$(this).find('.bx-chevron-right').css('transition', 'all .5s')
					$(this).addClass('nav-show')
					// $(this).find('div').addClass('nav-box')
				})
				/* 二级菜单a点击事件 */
				$(".li-a-a").click(function() {
					$(".li-a-a").each(function() {
						$(this).removeClass('active-li-a');
					})
					$(this).addClass('active-li-a');
				})

			})
			const vue = new Vue({
				el: '#app',
				data: {
					navLeftFlag: true
				},
				methods: {
					isShowLeft() {
						if (this.navLeftFlag ) {
							this.$refs.navRight.style.paddingLeft = '0px'
							this.$refs.cPage.style.left = '0px';
							this.navLeftFlag = false;
							// this.$refs.navLeft.style.width = '0px';
							// setTimeout(()=>{
							// 	this.navLeftFlag = false;
							// },200)
						} else {
							this.$refs.navRight.style.paddingLeft = '240px';
							this.$refs.cPage.style.left = '240px';
							this.navLeftFlag = true;
							// this.$refs.navLeft.style.width = '240px';
							// setTimeout(()=>{
							// 	this.navLeftFlag = true;
							// },200)
						}
					}
				}
			})
		</script>
</body>
</html>
